/* 引入Jura字体 */
@import url("http://fonts.googleapis.com/css?family=Jura:200,300,400,500,600,700,800,900");

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #0e141b;
    color: #e0e6eb;
    font-family: 'Jura';
    font-weight: 300;
    text-align: center;
    letter-spacing: 8px;
    /* 溢出隐藏 */
    overflow: hidden;
}

.column,
.colon{
    /* 行内元素 */
    display: inline-block;
    font-size: 86px;
    line-height: 86px;
    /* 顶部对齐 */
    vertical-align: top;
}

.column{
    /* 设置过渡 */
    transition: 0.3s;
}
/* 冒号 */
.colon{
    /* 垂直居中 (偏上一点) */
    transform: translateY(calc(50vh - 55px));
    /* 设置过渡 */
    transition: 0.3s;    
}

.colon::after{
    content: ":";
}

/* 数字的默认样式 */
.num{
    opacity: 0.25;
    /* 设置过渡 */
    transition: 0.5s;     
}
/* 当前时间 (正中间的数字) */
.num.visible{
    opacity: 1;
    text-shadow: 1px 1px 0 #2c6299;
}
/* 邻近的 */
.num.near{
    opacity: 0.35;
}
/* 远的 */
.num.far{
    opacity: 0.15;
}
/* 更远的 (越远越透明) */
.num.distant{
    opacity: 0.1;
}